<template>
    <div class="app-container">
        <h2 style="text-align: center;">组装清单</h2>
        <el-button type="primary" @click="save">添加组装清单</el-button>
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
            <table>
                <tr>
                    <th style="width: 120px;" colspan="8">基本信息</th>
                </tr>
                <tr>
                    <td>组装清单编号：</td>
                    <td><el-input v-model="form.assemblenumber" :disabled="true" placeholder="保存后自动生成" /></td>
                    <td>父件产品名称：</td>
                    <td><el-input v-model="form.dadname" /> </td>
                    <td>父件单位：</td>
                    <td>
                        <el-input v-model="form.dadwei" />
                    </td>
                    <td>父件数量：</td>
                    <td><el-input v-model="form.dadnum" /></td>
                </tr>
                <tr>
                    <td>制单日期：</td>
                    <td><el-input v-model="form.zdtime" :disabled="true" /></td>
                    <td>制单人员：</td>
                    <td>
                        <el-input v-model="form.zdname" :disabled="true" />
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>备注：</td>
                    <td colspan="7"><el-input type="textarea" v-model="form.zdDesc" /></td>
                </tr>
            </table>
            <br>
            <el-button type="primary" @click="dialogFormVisible = true">添加产品</el-button>
            <br><br>
            <el-table ref="multipleTable" :data="lists" size="small" style="width: 100%;" @sort-change="sortChange"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="44px"></el-table-column>
                <el-table-column label="序号" type="index" align="center" />
                <el-table-column label="产品名称" prop="pName" align="center" />
                <el-table-column label="产品编号" prop="pNum" align="center" />
                <el-table-column label="产品型号" prop="ptId" align="center">
                    <template slot-scope="{row}">
                        {{ row.ptId == 3 ? '医疗制造商' : '医疗注射器' }}
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" align="center" />
                <el-table-column label="单价" prop="price" align="center">
                    <template slot-scope="{row}">
                        <el-input v-model="row.price" type="" style="width: 100%;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="cpnum" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.cpnum" type="number" style="width: 100%;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="总金额" align="center">
                    <template #default="scope">
                        {{ scope.row.price * scope.row.cpnum }}
                    </template>
                </el-table-column>

                <el-table-column label="备注" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.cpdesc" type="textarea" placeholder="请输入备注"></el-input>
                    </template>
                </el-table-column>



            </el-table>

            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="cancel()"
                :title="formTitle" width="80%" height="500px">
                <el-row>
                    <el-col :span="4">
                        <el-tree :data="defaultProps" render-after-expand="true" default-expand-all="true"
                            @node-click="handleNodeClick"></el-tree>
                    </el-col>
                    <el-col :span="20">
                        <el-button type="primary" size="small" @click="handleAddProduct">确认</el-button>
                        <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small"
                            style="width: 90%" @sort-change="sortChange" @selection-change="handleSelectionChange1">
                            <el-table-column type="selection" width="44px"></el-table-column>
                            <el-table-column label="序号" type="index" width="50" />
                            <el-table-column label="产品编号" prop="pNum" align="center">
                            </el-table-column>
                            <el-table-column label="产品名称" prop="pName" align="center"></el-table-column>
                            <el-table-column label="所属类型" prop="ptId" align="center">
                                <template slot-scope="{row}">
                                    {{ row.ptId == 3 ? '医疗制造商' : '医疗注射器' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="规格型号" prop="skuId" align="center"></el-table-column>
                            <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="{row}">
                                    <el-button type="primary" size="mini" @click="handleUpdate(row)"
                                        icon="el-icon-edit" />
                                    <el-button type="danger" size="mini" @click="handleDelete(row)"
                                        icon="el-icon-delete" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-dialog>
        </el-form>
    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";



import router from "vue-router";

const defaultForm = {


    dadname: '呜呜呜',
    dadwei: '对对对',
    dadnum: '21',
    zdname: '张丽丽',
    zdDesc: '啊啊啊',
    produceAsspro: [
        {


            cpname: '',
            cpnumber: '',
            cptype: '',
            cpdw: '',
            cpprice: '',
            cpnum: 0,
        }
    ]
}
export default {
    name: 'Book',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    props: [],
    data() {
        return {
            defaultProps: [{}],
            rules: {
                documentSubject: [{
                    required: true,
                    message: '请输入主题',
                    trigger: 'blur'
                }],
                dueDate: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
                shipper: [{
                    required: true,
                    message: '价格',
                    trigger: 'blur'
                }],
            },
            form: Object.assign({}, defaultForm),
            lists: [{
                cpname: '',
                cpnumber: '',
                cptype: '',
                cpdw: '',
                cpprice: '',
                cpnum: 0,
                cpdesc: ''


            }],
            list: [],
            checked: [],
            companieslist: [],
            modelist: [],
            packaginglist: [],
            totalCount: 0,
            listLoading: true,
            formLoading: false,
            page: 1,
            dialogFormVisible: false,
            multipleSelection: [],
            formTitle: '',
            isEdit: false,
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getTypeList();
        this.getList();
        this.getcompanieslist();
        this.getmodelist();
        this.getpackaginglist();
    },
    mounted() { },
    methods: {
        getListStatus(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.list = items;
                    this.listLoading = false;
                    console.log(this.list);
                });
        },
        getMenuData() {
            this.treeLoading = true;
            this.$axios.gets("api/business/productsType/menu-item-list?pId=0").then((response) => {
                this.menuData = response.items;
                this.menus = response.items.filter((_) => _.pid == null);
                this.treeLoading = false;
            });
        },
        getTypeList() {
            this.$axios
                .gets('/api/business/productsType/menu-item-list?pId=0')
                .then((response) => {
                    this.defaultProps = response.items;
                })
        },
        getList() {
            this.listLoading = true;
            this.$axios
                .gets('/api/business/products/product')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },

        handleAddProduct(val) {
            console.log(val);
            this.lists = this.checked;
            this.dialogFormVisible = false;
        },
        handleSelectionChange(val) {
            console.log(val);
            this.form.produceAsspro = [];
            val.forEach((element) => {
                this.form.produceAsspro.push({
                    cpname: element.pName,
                    cpnumber: element.pNum,
                    cptype: element.ptId,
                    cpdw: element.unit,
                    cpprice: element.price,
                    cpnum: element.cpnum,
                    cpdesc: element.cpdesc,
                });
            })
            // console.log(this.form.productAssembleDtolist)

        },
        sortChange(data) {
            const { prop, order } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
        },
        handleSelectionChange1(val) {
            this.checked = [];
            val.forEach((element) => {
                this.checked.push(element);
            });
        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    this.form.roleNames = this.checkedRole;
                    this.$axios.posts('/api/business/assembleInfo/data-post', this.form).then(response => {
                        this.formLoading = false;
                        this.$notify({
                            title: '成功',
                            message: '新增成功',
                            type: 'success',
                            duration: 2000

                        });
                        this.$router.push({
                            path: "/assemble/assembleList",
                        })
                    }).catch(() => {
                        this.formLoading = false;
                    });
                }
            }
            );
        },
        getcompanieslist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=dcc22715-71c6-1610-1fab-3a12b0285eaf')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus1(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus1(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.companieslist = items;
                    console.log(this.list);
                });
        },
        getmodelist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=821ab0bc-b1df-128c-1307-3a12b023cc8a')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus2(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus2(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.modelist = items;
                    console.log(this.list);
                });
        },
        getpackaginglist() {
            this.$axios
                .gets('api/base/dictDetails/all?Pid=1b1fae99-f72d-f25f-ae39-3a12b679d530')
                .then((response) => {
                    this.totalCount = response.totalCount;
                    this.getListStatus3(
                        response.items,
                        response.items.map((_) => _.id)
                    );
                });
        },
        getListStatus3(items, ids) {
            this.$axios
                .posts('api/business/workflow/node-status', ids)
                .then((response) => {
                    items.forEach((element) => {
                        response.items.filter((i) => {
                            if (i.entityId === element.id) {
                                element.status = i.status;
                                element.nodeId = i.nodeId;
                                element.nodeStatus = i.nodeName;
                            }
                        });
                    });
                    this.packaginglist = items;
                    console.log(this.list);
                });
        },
    }
}

</script>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #615d5d;
    text-align: left;
    padding: 8px;
}

tr {
    background-color: #dfeffa;
}
</style>